<template>
  <div class="update">
    <mt-header fixed title="升级">
      <router-link to="/user" replace slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <div class="info" v-if="key">
      <div class="box">
        <span class="lev">{{key.gradeName}}</span>
        <p>{{key.downNumber}}个微信号</p>
      </div>
      <img src="../assets/img/shengji.png" alt="">
      <div class="box">
        <span>{{key.upGradeName}}</span>
        <p>{{key.upDownNumber}}个微信号</p>
      </div>
    </div>
    <div v-else class="null">
      <img src="../assets//img/暂无数据.png" alt="">
      <p>暂无数据</p>
    </div>
    <mt-button type="primary" class="logBtn" size='large' @click="submit()" v-if="key">提交申请</mt-button>
  </div>
</template>

<script>
import { Indicator, Toast } from 'mint-ui'
export default {
  data () {
    return {
      key: ''
    }
  },
  mounted () {
    Indicator.open()
    this.getInfo()
  },
  methods: {
    async submit () {
      let that = this
      let res = await that.$api({
        method: 'post',
        url: '/app/examine/upgradeExamine',
        params: {
          gradeName: this.gradeName,
          upGradeName: this.upGradeName
        }
      })
      try {
        if (res.success) {
          Indicator.close()
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        console.log(error)
        Indicator.close()
      }
    },
    async getInfo (ids) {
      let that = this
      let res = await that.$api({
        method: 'post',
        url: '/app/examine/upgrade'
      })
      try {
        if (res.success) {
          Indicator.close()
          this.key = res.data
          this.gradeName = this.key.gradeName
          this.upGradeName = this.key.upGradeName
        } else {
          Toast(res.msg)
        }
      } catch (error) {
        console.log(error)
        Indicator.close()
      }
    }
  }
}
</script>

<style scoped lang='less'>
.update{
  height: 100vh;
  background: #f2f2f2;
  padding: 0 .2rem;
}
.info{
  margin-top: .3rem;
  padding-top: .4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .box{
    font-size: .14rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    p{
      margin-top: .04rem;
    }
  }
  span{
    width: 0.64rem;
    height: 0.64rem;
    font-size: .24rem;
    border-radius: 50%;
    border: 1px solid #1395da;
    text-align: center;
    line-height: .64rem;
  }
  .lev{
    margin-top: .3rem;
    border: 1px solid #666;
  }
  img{
    width: 0.32rem;
    margin: 0 .2rem;
  }
}
.logBtn{
  margin-top: .6rem;
}
.null{
  text-align: center;
  font-size: .16rem;
  color: #666;
  margin-top: .8rem;
  p{
    margin-top: .1rem;
  }
}
</style>
